<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i><span class="cube-title">渠道详情</span>
    </div>
    <div class="jx-detail">
      <div class="title">
        基本信息
      </div>
      <div class="detail-item">
        <div class="item_4">
          <div class="list">
            <span>渠道名称：</span>
            <div class="right">
              <span>百度推广</span>
            </div>
          </div>
          <div class="list">
            <span>渠道ID：</span>
            <div class="right">
              <span>123456</span>
            </div>
          </div>
          <div class="list">
            <span>端口：</span>
            <div class="right">
              <span>客户端</span>
            </div>
          </div>
          <div class="list">
            <span>推广链接：</span>
            <div class="right">
              <span>www.baidu.com</span>
            </div>
          </div>
        </div>
        <div class="item_4">
          <div class="list">
            <span>推广状态：</span>
            <div class="right">
              <span>正常</span>
            </div>
          </div>
          <div class="list">
            <span>下载量：</span>
            <div class="right">
              <span>322224</span>
            </div>
          </div>
          <div class="list">
            <span>7日打开量（未注册）：</span>
            <div class="right">
              <span>21443</span>
            </div>
          </div>
          <div class="list">
            <span>7日打开率（未注册）：</span>
            <div class="right">
              <span>85%</span>
            </div>
          </div>
          <div class="list">
            <span>7日平均时长（未注册）：</span>
            <div class="right">
              <span>0.024小时</span>
            </div>
          </div>
        </div>
        <div class="item_4">
          <div class="list">
            <span>注册：</span>
            <div class="right">
              <span>322224</span>
            </div>
          </div>
          <div class="list">
            <span>7日打开量：</span>
            <div class="right">
              <span>21443</span>
            </div>
          </div>
          <div class="list">
            <span>7日打开率：</span>
            <div class="right">
              <span>85%</span>
            </div>
          </div>
          <div class="list">
            <span>7日平均时长：</span>
            <div class="right">
              <span>0.024小时</span>
            </div>
          </div>
        </div>
        <div class="item_4">
          <div class="list">
            <span>30日打开量：</span>
            <div class="right">
              <span>21443</span>
            </div>
          </div>
          <div class="list">
            <span>30日打开率：</span>
            <div class="right">
              <span>85%</span>
            </div>
          </div>
          <div class="list">
            <span>30日平均时长：</span>
            <div class="right">
              <span>0.024小时</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">
            推广统计
          </div>
          <div class="jx-table" style="padding: 0;">
            <el-table :data="detail" border style="width: 100%" v-loading="boo.loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="item1" label="用户机器码" width="150" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item2" label="手机型号" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item3" label="用户昵称"  align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.item3 == ''">未知</span>
                  <span v-else>
                    {{scope.row.item3}}
                    <img class="icon" src="/static/img/u913.png"/>
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="item11" label="用户ID" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item4" label="下载时间" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item5" label="注册时间" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item6" label="用户定位" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <img class="icon" src="/static/img/u178.png"/>
                  {{scope.row.item7}}
                </template>
              </el-table-column>
              <el-table-column prop="item7" label="所在地区" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item8" label="累计打开次数" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item9" label="累计时长" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  {{scope.row.item9}}小时
                </template>
              </el-table-column>
              <el-table-column prop="item10" label="7日活跃次数/时长" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  {{scope.row.item10}}小时
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        boo: {
          loading: false,
          id: this.$route.query.id,
        },
        detail: [
          {item1: '282982398273927',item2: '苹果iphone X',item3: '',item4: '2019-08-14 12:31:21',item5: '未注册',item6: '安徽省合肥市路演区',item7: '上海',item8: '776',item9: '0.67',item10: '21/0.21',item11: '未知'},
          {item1: '282982398273927',item2: '苹果iphone X',item3: '上官好看',item4: '2019-08-14 12:31:21',item5: '2019-08-14 12:31:21',item6: '安徽省合肥市路演区',item7: '上海',item8: '776',item9: '0.67',item10: '21/0.21',item11: '221133'}
        ],
			}
		},
		mounted(){
      let _self = this
    },
		methods: {
      back(){
        history.go(-1)
      },
    }
	}

</script>
<style scoped lang="sass">
  .jx-table .el-table .cell
    .icon
      width: 18px
      height: 20px
      position: relative
      top: 2px
  .jx-detail .detail-item .item_4:nth-child(2) .list span
    width: 150px
    font-size: 13px
  .jx-detail .detail-item .item_4:nth-child(2) .right span 
    width: auto
</style>
